<template>
    <div class="boxContentCss">
        <div >
            <el-form ref="formRef" :model="rentform" label-position="right" label-width="auto">
                <EdCreateCard title="租赁信息">
                    <template #back>
                        <el-button class="ed-button ed_black-bottom"  v-if="rentform.leaseStatus == 1" v-has="'property:houseRent:edit'" @click="edit()"><svg-icon icon-class="rentEdit"/>编辑</el-button>
                        <el-button class="ed-button ed_black-bottom" v-if="rentform.leaseStatus == 1" v-has="'property:houseRent:rent'" @click="houseRent()"><svg-icon icon-class="HouseRent"/>房屋租赁</el-button>
                        <el-button class="ed-button ed_delete_bottom" v-if="rentform.leaseStatus == 1" v-has="'property:houseRent:cancelRent'" style="margin-right:10px" @click="resetRent()"><svg-icon icon-class="cancelRent"/>取消租赁</el-button>
                        <div class="createBack" style="margin-top:8px" @click="$utilsSet.goBack($router)" >
                            <svg-icon icon-class="back" /> 返回
                        </div>
                    </template>
                    <div class="zh_flex">
                        <div class="left">
                            <el-row class="width-100">
                                <el-col :span="12">
                                    <el-form-item label="状态:">
                                        <el-button class="ed-table-bottom ed_7_border" v-if="rentform.leaseStatus == 2">已出租</el-button>
                                        <el-button class="ed-table-bottom ed_4_border" v-if="rentform.leaseStatus == 1">出租中</el-button>
                                        <el-button class="ed-table-bottom ed_9_border" v-if="rentform.leaseStatus == 0">已取消</el-button>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="房号：">
                                        <span class="textStyle">{{rentform.address || '-'}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="12">
                                    <el-form-item label="联系人:">
                                        <span class="textStyle">{{rentform.leaserName || '-'}}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="联系电话:">
                                        <span class="textStyle">{{rentform.leaserPhone || '-'}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="12">
                                    <el-form-item label="出租方式:">
                                        <span class="textStyle" v-if="rentform.rentWay==1">整租</span>
                                        <span class="textStyle" v-if="rentform.rentWay==2">合租</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="房屋面积:">
                                        <span class="textStyle">{{rentform.houseArea+'㎡' || '-'}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="12">
                                    <el-form-item label="户型:">
                                        <span class="textStyle">{{rentform.room+'室'+rentform.hall+'厅'+rentform.kitchen+'厨'+ rentform.toilets+'卫'|| '-'}}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="装修:">
                                        <span class="textStyle" v-if="rentform.rentWay==1">毛坯</span>
                                        <span class="textStyle" v-if="rentform.rentWay==2">简装</span>
                                        <span class="textStyle" v-if="rentform.rentWay==3">中装</span>
                                        <span class="textStyle" v-if="rentform.rentWay==4">精装</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="24">
                                    <el-form-item label="租金:">
                                        <span class="textStyle">{{rentform.rent+'元' || '-'}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="24">
                                    <el-form-item label="图片:">
                                        <div class="textStyle">
                                            <el-image style="width:120px;height:120px;margin-right: 20px;"  v-for="item in rentform.pics" :key="item" :src="item"  :preview-src-list="rentform.pics"> </el-image>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100">
                                <el-col :span="24">
                                    <el-form-item label="房屋简介:">
                                    <el-collapse v-model="activeNames" @change="handleCollapseChange">
                                    <!-- <el-collapse v-if="rentform.descriptionType==2" v-model="activeNames" @change="handleCollapseChange"> -->
                                        <el-collapse-item name="1">
                                            <template slot="title">
                                                <el-button class="ed-button ed_black-bottom" size="mini">{{collapse_text}} <i :class="[ collapse_icon]"></i> </el-button>
                                            </template>
                                            <div v-html="rentform.description || '-'"></div>
                                        </el-collapse-item>
                                    </el-collapse>
                                    <!-- <div v-else class="textStyle urlStyle" @click="gotoUrl(rentform.productUrl)">{{rentform.productUrl || '-'}}</div> -->
                                </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="width-100" v-if="this.$route.query.leaseStatus==0">
                                <el-col :span="24">
                                    <el-form-item label="取消原因">
                                        <span class="textStyle">{{rentform.reason || '-'}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="right">
                            <div class="right_title">进度跟踪</div>
                            <div>
                                <el-timeline :reverse="reverse">
                                    <el-timeline-item v-for="(activity, index) in activities" :key="index" color="#EED096" size="large">
                                        <div class="timeline_time">{{activity.scheduleTime}}</div>
                                        <div class="timeline_content">{{activity.status}}</div>
                                        <!-- <div class="timeline_img">
                                            <el-image v-for="(item, index) in activity.images" :key="index"
                                                    :src="item" :preview-src-list="[item]" fit="cover">
                                            </el-image>
                                        </div> -->
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </div>
                    </div>
                </EdCreateCard>
            </el-form>
        </div>
        <!-- 已出租状态一进来是租户详情 -->
        <div v-show="!isEditting">
            <el-form  ref="formRef" :model="tenantform" label-position="right" label-width="auto">
            <EdCreateCard title="交易信息" v-if="this.$route.query.leaseStatus==2">
                <template #back>
                    <el-button class="ed-button ed_black-bottom" @click="eidtTenant"><svg-icon icon-class="edit-svg"/>编辑</el-button>
                </template>
                <div class="zh_flex">
                    <div class="left">
                        <el-row class="width-100">
                            <el-col :span="12">
                                <el-form-item label="中介方">
                                    <span class="textStyle" v-if="tenantform.mediator==1">物业</span>
                                    <span class="textStyle" v-if="tenantform.mediator==2">非物业</span>
                                    <!-- <span class="textStyle">{{tenantform.mediator==1 ? '物业' : '-'}}</span> -->
                                    <!-- <span class="textStyle">{{tenantform.mediator==2 ? '非物业' : '-'}}</span> -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="承租人">
                                    <span class="textStyle">{{tenantform.tenantName || '-'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="12">
                                <el-form-item label="身份证号">
                                    <span class="textStyle">{{tenantform.idCart || '-'}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话">
                                    <span class="textStyle">{{tenantform.tenantPhone || '-'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="12">
                                <el-form-item label="交易凭证">
                                    <div class="textStyle">
                                    <!-- <div class="textStyle" v-if="rentform.pics.length>0"> -->
                                        <el-image style="width:120px;height:120px"  v-for="item in tenantform.voucherPics" :key="item" :src="item" :preview-src-list="tenantform.voucherPics"></el-image>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="12">
                                <el-form-item label="备注">
                                    <span class="textStyle">{{tenantform.comment || '-'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </EdCreateCard>
        </el-form>
        </div>
         <div v-show="isEditting">
            <el-form  ref="formRef" :model="tenantform" label-position="right" label-width="auto">
            <EdCreateCard title="交易信息">
                <template #back>
                    <el-button class="ed-button ed_black-bottom" @click="saveMessage"><svg-icon icon-class="edit-svg"/>保存</el-button>
                </template>
                <div class="zh_flex">
                    <div class="left">
                        <el-row class="width-100">
                            <el-col :span="8">
                                <el-form-item label="中介方" prop="mediator" :rules="$validate.validates({required:true,msg:'请选择是否室物业'})">
                                    <template>
                                        <el-radio v-model="tenantform.mediator" label='1'>物业</el-radio>
                                        <el-radio v-model="tenantform.mediator" label='2'>非物业</el-radio>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="承租人" prop="tenantName" :rules="$validate.validates({required:true,msg:'请输入承租人业'})">
                                    <el-input class="flex-input"  v-model="tenantform.tenantName" placeholder="请输入承租人"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="8">
                                <el-form-item label="身份证号"  prop="idCart" :rules="$validate.validates({required:true,msg:'请输入身份证号',type:'cardNo'})" >
                                    <el-input class="flex-input"  v-model="tenantform.idCart" placeholder="请输入身份证号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="联系电话" prop="tenantPhone" :rules="$validate.validates({required:true,msg:'请输入联系电话'})" >
                                    <el-input class="flex-input"  v-model="tenantform.tenantPhone" placeholder="请输入联系电话"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="24">
                                <el-form-item label="交易凭证" prop="voucherPics">
                                    <el-upload
                                        accept=".jpg, .jpeg, .png, .gif"
                                        :action="action"
                                        :headers="headers"
                                        list-type="picture-card"
                                        :limit="5"
                                        :multiple="true"
                                        :file-list="fileList"
                                        :before-upload="beforeImgUpload"
                                        :on-preview="handleImgPreview"
                                        :on-success="handleImgSuccess"
                                        :on-remove="handleImgRemove">
                                        <!-- <el-image  v-for="item in editForm.image" :key="item" :src="item" :preview-src-list="editForm.image"></el-image> -->
                                        <div >
                                            <i class="el-icon-plus"></i>
                                            <div style="font-size: 14px;color: rgba(0, 0, 0, 0.65); margin: 0 0 8px 0;line-height: 1;margin-top: -50px;">上传图片</div>
                                        </div>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible" >
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                    <p class="labelFont">请上传2M以内的图片，建议上传图片大小430px*430px,至多5张</p>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="width-100">
                            <el-col :span="16">
                                <el-form-item label="备注">
                                    <el-input class="flex-input"  v-model="tenantform.comment" placeholder="请输入备注"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </EdCreateCard>
        </el-form>
        </div>
        <EdDialog :width="'474px'" :title="'取消租赁'" ref="rentDialogRef" class="batchHandleDialog" v-if="showRentdialog"  @close-dialog="cancelDialog" @save-dialog="cancelRentDialog">
           <div class="content">
                <div class="header">
                    <i class="el-icon-warning" style="color:#EED096;font-size: 18px;"></i>&nbsp;&nbsp;
                    <span>是否取消租赁此房源</span>
                </div>
                <div class="main">
                    取消原因&nbsp;
                    <el-input v-model="cancelRentForm.reason" style="width:305px;" placeholder="清输入"></el-input>
                </div>
           </div>
        </EdDialog>
        <HouseRentDialog ref="tenantAddRef" v-if="this.$route.query.leaseStatus==1"  :isShow="changeDialog" :title_text="title_text" @close-dialog="tenantAddDialogClose" @save-dialog="tenantAddDialogSave"></HouseRentDialog>
    </div>
    
</template>

<script>
    import EdTinymce from 'src/components/EdTinymce.vue'
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { defineComponent } from 'vue'
    import {getToken} from 'src/utils/auth'
    // import { houseRentInfo,tenantInfo } from "./api";
    import * as api from './api'  
    import EdDialog from 'src/components/EdDialog.vue';
    import HouseRentDialog from './HouseRentDialog.vue'
    import { returnName } from "src/utils/common.js";
    import { getDictByCode } from "src/api/dictionaries";
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard, EdDateTimeRange, EdSelect, EdTinymce, EdDialog,HouseRentDialog},
        data(){
            return{
                // 租赁信息
                rentform:{
                    leaseStatus:'',
                    addressPart:'',
                    leaserName:'',
                    leaserPhone:'' ,
                    rentWay:'',
                    address:'',
                    houseArea:'',
                    room:'',
                    hall:'',
                    kitchen:'',
                    toilets:'',
                    decorate:'',
                    rent:'',
                    pics:[],
                    description:'',
                    productUrl:''
                },
                // 交易信息
                tenantform:{
                    mediator:'',
                    tenantName:'',
                    idCart:'',
                    tenantPhone:'',
                    voucherPics:'',
                    comment:''
                },
                reverse: true,
                activities: [],
                detailData:{
                    leaseStatus:'',
                    orderType:''
                },
                pickerParams:{
                    valueFormat:"yyyy-MM-dd"
                },
                orderTypeParams: {
                    options: []
                },
                // 房屋简介-折叠
                activeNames: ['1'],
                collapse_text: '收起',
                collapse_icon: 'el-icon-arrow-up',
                // changeParams: null,
                // 房屋租赁
                title_text: '房屋租赁',
                changeDialog:false,
                // item: {
                //     mediator:'',
                //     tenantName:'',
                //     tenantPhone:'',
                //     idCart:'',
                //     voucherPics:[],
                //     remarks:''
                // },
                showRentdialog:false,
                cancelRentForm:{
                    reason:'',
                    id:this.$route.query.id
                },
                isEditting:false,
                action: '',
                headers:{
                    RdAuthorization: getToken()
                },
                dialogImageUrl: '',
                fileList: [],
                dialogVisible: false,
                dialogImageUrl: '',
            }
        },
        activated(){
            this.action = this.$baseApi + "/file/upload";
            // 出租中
            if(this.$route.query.id && this.$route.query.leaseStatus==1){
                // 编辑 
                this.cancelRentForm.id= this.$route.query.id 
                this.houseRentInfo();
                
            }else {}
            // 已出租
            if(this.$route.query.id && this.$route.query.leaseStatus==2){
                this.houseRentInfo();
                this.tenantInfo()
            }

            // 已取消
            if(this.$route.query.id && this.$route.query.leaseStatus==0){
                this.houseRentInfo();
            }
        },
        deactivated(){
            this.rentform={}
            this.tenantform={}
            this.cancelRentForm={}
            // 清空editor的缓存
            if(this.$refs.EdTinymce) this.$refs.EdTinymce.$children[0].cache = '';
        },
        methods:{
            houseRentInfo(){
                api.houseRentDetail({id:this.$route.query.id}).then(response => {
                    if(response.success == true) {
                        this.rentform = {
                            leaseStatus: response.data.leaseStatus,
                            addressPart: response.data.addressPart,
                            leaserName: response.data.leaserName,
                            leaserPhone: response.data.leaserPhone,
                            rentWay: response.data.rentWay,
                            houseArea: response.data.houseArea,
                            room: response.data.room,
                            hall: response.data.hall,
                            kitchen: response.data.kitchen,
                            toilets: response.data.toilets,
                            decorate: response.data.decorate,
                            rent: response.data.rent,
                            pics: response.data.pics,
                            description: response.data.description,
                            address: response.data.address,
                        };
                        this.activities = response.data.schedule
                    }
                })
            },
            tenantInfo(){
                api.tenantInfo({id:this.$route.query.id}).then(response => {
                    if(response.success) {
                        this.tenantform = {...response.data}
                        this.tenantform.idCart = response.data.idCart
                        this.tenantform.voucherPics=response.data.voucherPics

                        let fileList = []
                        response.data.voucherPics.forEach(x=>{
                            fileList.push({url:x})
                        })
                        // this.fileList = filList
                    }
                })
            },
            update(){
                this.$router.push({
                    path: '/shopping/resourcePool-update',
                    query: { id: this.$route.query.id },
                })
            },
            // 出租中编辑跳转页面
            edit(){
                this.$router.push({
                    path: '/property/houseRent-edit',
                    query: {id: this.$route.query.id,leaseStatus:this.$route.query.leaseStatus},
                })
            },
            houseRent(){
               this.changeDialog = true; 
            },
            resetRent(){
                this.showRentdialog=true
            },
            gotoUrl(url){
                window.open(url, "_blank");
            },
            handleCollapseChange(val){
                console.log(val);
                this.collapse_text = val.length > 0 ? '收起' : '展开';
                this.collapse_icon = val.length > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down';
            },
            tenantAddDialogClose(){
                this.changeDialog = false;
                this.$refs.table.$children[0].clearSelection();
            },
            tenantAddDialogSave(data){
                console.log('data',data);
                if(this.$route.query.id && this.$route.query.leaseStatus==1){
                    let params = {
                        id:this.$route.query.id,
                        comment:data['comment'],
                        mediator:data['mediator'],
                        idCart:data['idCart'],
                        tenantName:data['tenantName'],
                        tenantPhone:data['tenantPhone'],
                        voucherPics:data['voucherPics']
                    }
                    // this.$refs['tenantAddRef'].validate((valid)=>{
                    //     if(valid){
                            api.tenantAdd(params).then((res)=>{
                                if(res.success) {
                                    this.$message.success({
                                        message: '操作成功！',
                                        duration: 2000,
                                        center:true
                                    });
                                    this.$refs.tenantAddRef.loading = false
                                    this.changeDialog = false;
                                    this.$refs.table.$children[0].clearSelection();
                                    this.$refs.table.load()
                                }
                            }).catch(()=>{
                                this.$refs.tenantAddRef.cancelStatus()
                                this.$refs.tenantAddRef.loading = false
                            })
                    //     }
                    // })
                    
                }
            },
            cancelDialog(){
                this.showRentdialog=false
            },
            cancelRentDialog(){
                api.cancelHouseRent(this.cancelRentForm).then((res=>{
                    if(res.success){
                        this.$message.success({
                            message: '取消租赁成功！',
                            duration: 2000,
                            center:true
                        });
                        this.showRentdialog=false
                        this.$refs.rentDialogRef.resetFields()
                        this.$refs.rentDialogRef.loading = false
                        this.$nextTick(()=>{
                            this.$refs.table.load(1,10)
                        })
                    }else {
                        this.$message.success({
                            message: '取消租赁失败！', 
                            duration: 2000,
                            center:true
                        });
                        this.showRentdialog=false
                        this.$refs.rentDialogRef.resetFields()
                        this.$refs.rentDialogRef.loading = false
                        this.$nextTick(()=>{
                            this.$refs.table.load(1,10)
                        })
                    }
                }))
            },
             // 图片 上传前
        beforeImgUpload(file){
            // console.log('before-->', file)
            const fileType = file.name.split('.');
            const fileDate = fileType.slice(-1);
            if (['jpeg', 'jpg', 'png', 'gif'].indexOf(fileDate[0]) < 0) {
                this.$message.error('仅支持格式：.jpeg、.jpg、.png、.gif!');
                return false
            }
            const isLt5M = file.size / 1024 /1024 < 2;
            if (!isLt5M) {
                return this.$message.error('上传文件大小不能超过 2MB!');
            }
            // return isLt5M;
            return true;
        },
        // 图片 上传成功
        handleImgSuccess(response, file, fileList){
            let res = file.response;
            if(res&&res.success == true){
                console.log('res',res);
                this.editForm.image.push(res['data'])
            }
        },
        // 图片 删除
        handleImgRemove(file, fileList) {
            this.editForm.image = fileList&&fileList.map(v=>{
                return v['url']
            })
        },
        // 图片 预览
        handleImgPreview(file) {
            console.log('file',file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 交易信息保存的方法
        saveMessage(){
            this.isEditting = false
            api.tenantUpdate({id:this.$route.query.id}).then(res => {
                if(res.success) {
                    this.$message.success({ 
                        message: '交易信息编辑成功！',
                        duration: 2000,
                        center:true
                    });
                    this.$refs.table.load()
                }
            })
        },
        // 交易信息编辑回显的方法
        eidtTenant(){
            this.isEditting = true
            this.tenantInfo()
        }

        },
    })
</script>

<style scoped lang="scss">
:deep .batchHandleDialog{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        .el-dialog__body{
            padding-left: 75px;
        }
        .header{
            color: #1E1E1E;
            margin-bottom: 30px;
        }
        .main{
            color: #606266;
        }
}
   :deep .zh_flex{
        padding: 16px !important;
        font-family: 'Noto Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 28px;
        .left{
            flex: 2;
            border-right: 1px solid #e5e7eb;
            // border: 1px solid #e5e7eb;
            padding: 0 40px 5px 20px;
        }
        .right{
            flex: 1;
            padding: 5px 20px;
        }
    }
</style>